<?php
/**
 * 会员页面内容
 */

if (!defined('ROOT_PATH')) {
    die('直接访问被禁止');
}

// 设置页面标题
set_page_title('会员权益');

// 页面特定样式
$page_styles = <<<HTML
<style>
    .membership-header {
        text-align: center;
        padding: 60px 0;
        background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
        color: white;
        border-radius: 15px;
        margin-bottom: 50px;
    }
    
    .membership-title {
        font-size: 2.5rem;
        font-weight: bold;
        margin-bottom: 15px;
    }
    
    .membership-subtitle {
        font-size: 1.2rem;
        max-width: 700px;
        margin: 0 auto 25px;
        opacity: 0.9;
    }
    
    .plans-container {
        margin-bottom: 50px;
    }
    
    .plan-card {
        background-color: white;
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
        height: 100%;
        position: relative;
        border: 1px solid #f0f0f0;
    }
    
    .plan-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    }
    
    .plan-header {
        padding: 25px;
        text-align: center;
        border-bottom: 1px solid #f0f0f0;
    }
    
    .plan-title {
        font-size: 1.5rem;
        font-weight: bold;
        margin-bottom: 5px;
    }
    
    .plan-price {
        font-size: 2.5rem;
        font-weight: bold;
        margin-bottom: 10px;
        color: #2575fc;
    }
    
    .plan-price small {
        font-size: 1rem;
        opacity: 0.7;
    }
    
    .plan-description {
        font-size: 0.9rem;
        color: #6c757d;
        margin-bottom: 0;
    }
    
    .plan-features {
        padding: 25px;
    }
    
    .feature-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
    .feature-item {
        padding: 10px 0;
        display: flex;
        align-items: flex-start;
    }
    
    .feature-icon {
        margin-right: 15px;
        color: #2575fc;
        font-size: 1.1rem;
        line-height: 1.5;
    }
    
    .feature-text {
        color: #444;
        line-height: 1.5;
    }
    
    .plan-footer {
        padding: 20px 25px;
        text-align: center;
        background-color: #f8f9fa;
    }
    
    .popular-badge {
        position: absolute;
        top: 0;
        right: 30px;
        background-color: #ff6b6b;
        color: white;
        padding: 8px 15px;
        font-size: 0.8rem;
        font-weight: bold;
        border-radius: 0 0 10px 10px;
        box-shadow: 0 4px 10px rgba(255, 107, 107, 0.3);
    }
    
    .btn-membership {
        padding: 10px 25px;
        font-weight: 600;
        border-radius: 50px;
        transition: all 0.3s ease;
    }
    
    .btn-membership:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    }
    
    .benefits-section {
        margin-bottom: 50px;
    }
    
    .section-title {
        text-align: center;
        font-size: 2rem;
        font-weight: bold;
        margin-bottom: 40px;
        color: #444;
    }
    
    .benefit-card {
        background-color: white;
        border-radius: 15px;
        padding: 25px;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
        text-align: center;
        height: 100%;
        transition: all 0.3s ease;
    }
    
    .benefit-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }
    
    .benefit-icon {
        font-size: 2.5rem;
        margin-bottom: 20px;
        color: #2575fc;
    }
    
    .benefit-title {
        font-size: 1.2rem;
        font-weight: bold;
        margin-bottom: 15px;
        color: #444;
    }
    
    .benefit-text {
        color: #6c757d;
        font-size: 0.95rem;
    }
    
    .testimonials-section {
        background-color: #f8f9fa;
        padding: 50px 0;
        border-radius: 15px;
        margin-bottom: 50px;
    }
    
    .testimonial-card {
        background-color: white;
        border-radius: 15px;
        padding: 25px;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
        height: 100%;
    }
    
    .testimonial-text {
        font-style: italic;
        color: #444;
        margin-bottom: 20px;
        position: relative;
        padding: 0 20px;
    }
    
    .testimonial-text:before, 
    .testimonial-text:after {
        content: '"';
        font-size: 2rem;
        color: #e9ecef;
        position: absolute;
    }
    
    .testimonial-text:before {
        left: 0;
        top: -10px;
    }
    
    .testimonial-text:after {
        right: 0;
        bottom: -20px;
    }
    
    .testimonial-author {
        display: flex;
        align-items: center;
    }
    
    .author-avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-right: 15px;
        background-color: #e9ecef;
    }
    
    .author-name {
        font-weight: bold;
        margin-bottom: 0;
    }
    
    .author-title {
        font-size: 0.85rem;
        color: #6c757d;
    }
    
    .faq-section {
        margin-bottom: 50px;
    }
    
    .accordion-item {
        margin-bottom: 15px;
        border: none;
    }
    
    .accordion-button {
        font-weight: bold;
        padding: 15px 20px;
        background-color: white;
        border-radius: 10px !important;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
    }
    
    .accordion-button:not(.collapsed) {
        background-color: #2575fc;
        color: white;
    }
    
    .accordion-body {
        padding: 20px;
        color: #6c757d;
    }
    
    .cta-section {
        text-align: center;
        padding: 40px;
        background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
        color: white;
        border-radius: 15px;
    }
    
    .cta-title {
        font-size: 2rem;
        font-weight: bold;
        margin-bottom: 15px;
    }
    
    .cta-text {
        max-width: 600px;
        margin: 0 auto 25px;
        opacity: 0.9;
    }
    
    .btn-lg {
        padding: 15px 40px;
        font-size: 1.1rem;
    }
</style>
HTML;
?>

<!-- 主内容区 -->
<div class="container mt-4">
    <!-- 会员页面标题 -->
    <div class="membership-header">
        <h1 class="membership-title">选择适合您的会员方案</h1>
        <p class="membership-subtitle">加入KidsMind会员，为您的孩子提供更全面的思维训练资源和个性化学习体验</p>
        <a href="#plans" class="btn btn-light btn-lg">查看会员方案</a>
    </div>
    
    <!-- 会员方案 -->
    <div id="plans" class="plans-container">
        <h2 class="section-title">会员方案</h2>
        
        <div class="row">
            <!-- 基础会员 -->
            <div class="col-md-4 mb-4">
                <div class="plan-card">
                    <div class="plan-header">
                        <h3 class="plan-title">基础会员</h3>
                        <div class="plan-price">
                            免费
                        </div>
                        <p class="plan-description">开始基础思维训练体验</p>
                    </div>
                    
                    <div class="plan-features">
                        <ul class="feature-list">
                            <li class="feature-item">
                                <span class="feature-icon"><i class="bi bi-check-circle"></i></span>
                                <span class="feature-text">基础题目体验（每类题目限量）</span>
                            </li>
                            <li class="feature-item">
                                <span class="feature-icon"><i class="bi bi-check-circle"></i></span>
                                <span class="feature-text">有限答题次数（每日10题）</span>
                            </li>
                            <li class="feature-item">
                                <span class="feature-icon"><i class="bi bi-check-circle"></i></span>
                                <span class="feature-text">基础学习进度统计</span>
                            </li>
                            <li class="feature-item">
                                <span class="feature-icon"><i class="bi bi-x-circle text-muted"></i></span>
                                <span class="feature-text text-muted">专属学习计划</span>
                            </li>
                            <li class="feature-item">
                                <span class="feature-icon"><i class="bi bi-x-circle text-muted"></i></span>
                                <span class="feature-text text-muted">专属活动参与资格</span>
                            </li>
                            <li class="feature-item">
                                <span class="feature-icon"><i class="bi bi-x-circle text-muted"></i></span>
                                <span class="feature-text text-muted">家长指导资源</span>
                            </li>
                        </ul>
                    </div>
                    
                    <div class="plan-footer">
                        <a href="<?php echo page_url('register'); ?>" class="btn btn-outline-primary btn-membership">立即注册</a>
                    </div>
                </div>
            </div>
            
            <!-- 黄金会员 -->
            <div class="col-md-4 mb-4">
                <div class="plan-card">
                    <div class="popular-badge">最受欢迎</div>
                    <div class="plan-header">
                        <h3 class="plan-title">黄金会员</h3>
                        <div class="plan-price">
                            ¥99<small>/月</small>
                        </div>
                        <p class="plan-description">全面思维训练方案</p>
                    </div>
                    
                    <div class="plan-features">
                        <ul class="feature-list">
                            <li class="feature-item">
                                <span class="feature-icon"><i class="bi bi-check-circle"></i></span>
                                <span class="feature-text">无限答题次数</span>
                            </li>
                            <li class="feature-item">
                                <span class="feature-icon"><i class="bi bi-check-circle"></i></span>
                                <span class="feature-text">解锁全部专区题目</span>
                            </li>
                            <li class="feature-item">
                                <span class="feature-icon"><i class="bi bi-check-circle"></i></span>
                                <span class="feature-text">详细学习数据分析</span>
                            </li>
                            <li class="feature-item">
                                <span class="feature-icon"><i class="bi bi-check-circle"></i></span>
                                <span class="feature-text">参与专属活动</span>
                            </li>
                            <li class="feature-item">
                                <span class="feature-icon"><i class="bi bi-check-circle"></i></span>
                                <span class="feature-text">获取限量奖励</span>
                            </li>
                            <li class="feature-item">
                                <span class="feature-icon"><i class="bi bi-x-circle text-muted"></i></span>
                                <span class="feature-text text-muted">个性化训练计划定制</span>
                            </li>
                        </ul>
                    </div>
                    
                    <div class="plan-footer">
                        <a href="<?php echo page_url('checkout'); ?>?plan=gold" class="btn btn-primary btn-membership">立即开通</a>
                    </div>
                </div>
            </div>
            
            <!-- 钻石会员 -->
            <div class="col-md-4 mb-4">
                <div class="plan-card">
                    <div class="plan-header">
                        <h3 class="plan-title">钻石会员</h3>
                        <div class="plan-price">
                            ¥199<small>/月</small>
                        </div>
                        <p class="plan-description">精英定制思维训练</p>
                    </div>
                    
                    <div class="plan-features">
                        <ul class="feature-list">
                            <li class="feature-item">
                                <span class="feature-icon"><i class="bi bi-check-circle"></i></span>
                                <span class="feature-text">黄金会员所有权益</span>
                            </li>
                            <li class="feature-item">
                                <span class="feature-icon"><i class="bi bi-check-circle"></i></span>
                                <span class="feature-text">个性化训练计划定制</span>
                            </li>
                            <li class="feature-item">
                                <span class="feature-icon"><i class="bi bi-check-circle"></i></span>
                                <span class="feature-text">优先参与线下活动</span>
                            </li>
                            <li class="feature-item">
                                <span class="feature-icon"><i class="bi bi-check-circle"></i></span>
                                <span class="feature-text">专属客服支持</span>
                            </li>
                            <li class="feature-item">
                                <span class="feature-icon"><i class="bi bi-check-circle"></i></span>
                                <span class="feature-text">月度进步评估报告</span>
                            </li>
                            <li class="feature-item">
                                <span class="feature-icon"><i class="bi bi-check-circle"></i></span>
                                <span class="feature-text">专家教育指导</span>
                            </li>
                        </ul>
                    </div>
                    
                    <div class="plan-footer">
                        <a href="<?php echo page_url('checkout'); ?>?plan=diamond" class="btn btn-primary btn-membership">立即开通</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 会员权益 -->
    <div class="benefits-section">
        <h2 class="section-title">会员专享权益</h2>
        
        <div class="row">
            <div class="col-md-4 mb-4">
                <div class="benefit-card">
                    <div class="benefit-icon">🎯</div>
                    <h4 class="benefit-title">个性化学习体验</h4>
                    <p class="benefit-text">根据孩子的学习进度和能力水平，智能推荐适合的题目和挑战，让学习更有针对性。</p>
                </div>
            </div>
            
            <div class="col-md-4 mb-4">
                <div class="benefit-card">
                    <div class="benefit-icon">📊</div>
                    <h4 class="benefit-title">详细学习分析</h4>
                    <p class="benefit-text">通过数据可视化展示孩子的学习情况，包括答题正确率、思考时间、能力发展曲线等。</p>
                </div>
            </div>
            
            <div class="col-md-4 mb-4">
                <div class="benefit-card">
                    <div class="benefit-icon">🏆</div>
                    <h4 class="benefit-title">独家活动与奖励</h4>
                    <p class="benefit-text">会员专属线上线下活动，以及完成挑战后的实物奖励，激发孩子的学习动力。</p>
                </div>
            </div>
            
            <div class="col-md-4 mb-4">
                <div class="benefit-card">
                    <div class="benefit-icon">🔄</div>
                    <h4 class="benefit-title">持续更新内容</h4>
                    <p class="benefit-text">每月更新新题型和挑战，保持内容的新鲜度，让孩子保持持续学习的兴趣。</p>
                </div>
            </div>
            
            <div class="col-md-4 mb-4">
                <div class="benefit-card">
                    <div class="benefit-icon">👨‍👩‍👧‍👦</div>
                    <h4 class="benefit-title">家长指导资源</h4>
                    <p class="benefit-text">提供专业的家庭教育指导材料，帮助家长更好地辅导孩子，延续线上学习效果。</p>
                </div>
            </div>
            
            <div class="col-md-4 mb-4">
                <div class="benefit-card">
                    <div class="benefit-icon">📱</div>
                    <h4 class="benefit-title">多设备同步</h4>
                    <p class="benefit-text">在手机、平板和电脑上同步学习进度，随时随地进行学习，不受设备限制。</p>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 用户评价 -->
    <div class="testimonials-section">
        <h2 class="section-title">家长的反馈</h2>
        
        <div class="row">
            <div class="col-md-4 mb-4">
                <div class="testimonial-card">
                    <div class="testimonial-text">
                        "自从购买了黄金会员后，我家孩子每天都主动要求做思维训练题，比起以前玩游戏的时间多了学习的时间，作为家长非常欣慰。"
                    </div>
                    <div class="testimonial-author">
                        <div class="author-avatar">
                            <i class="bi bi-person-circle fs-2 text-muted"></i>
                        </div>
                        <div>
                            <p class="author-name">张女士</p>
                            <p class="author-title">5岁小朋友家长</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4 mb-4">
                <div class="testimonial-card">
                    <div class="testimonial-text">
                        "KidsMind的题目设计很有趣，我家宝宝不知不觉就学到了很多知识。钻石会员的个性化学习计划帮他找到了学习的弱点，非常值得。"
                    </div>
                    <div class="testimonial-author">
                        <div class="author-avatar">
                            <i class="bi bi-person-circle fs-2 text-muted"></i>
                        </div>
                        <div>
                            <p class="author-name">王先生</p>
                            <p class="author-title">4岁小朋友家长</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4 mb-4">
                <div class="testimonial-card">
                    <div class="testimonial-text">
                        "孩子从3岁开始用KidsMind，现在已经6岁了，明显感觉到他的思维比同龄孩子更活跃，遇到问题会想各种方法解决，非常感谢！"
                    </div>
                    <div class="testimonial-author">
                        <div class="author-avatar">
                            <i class="bi bi-person-circle fs-2 text-muted"></i>
                        </div>
                        <div>
                            <p class="author-name">李女士</p>
                            <p class="author-title">6岁小朋友家长</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 常见问题 -->
    <div class="faq-section">
        <h2 class="section-title">常见问题</h2>
        
        <div class="accordion" id="faqAccordion">
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingOne">
                    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        会员费用如何收取？
                    </button>
                </h2>
                <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#faqAccordion">
                    <div class="accordion-body">
                        会员费用按月收取，支持支付宝、微信支付和银行卡等多种付款方式。您可以选择按月支付，也可以选择季度或年度套餐享受更多优惠。
                    </div>
                </div>
            </div>
            
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingTwo">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        如何取消会员？
                    </button>
                </h2>
                <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#faqAccordion">
                    <div class="accordion-body">
                        您可以随时在"个人中心"的"会员管理"中取消续费。取消后，您可以继续使用当前已支付周期内的会员服务，直到会员期限结束。
                    </div>
                </div>
            </div>
            
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingThree">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                        一个账号可以给多个孩子使用吗？
                    </button>
                </h2>
                <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#faqAccordion">
                    <div class="accordion-body">
                        一个账号默认只能创建一个孩子的档案。如果您有多个孩子需要使用，建议选择家庭套餐，最多可以创建3个孩子档案，并且享受更多优惠。
                    </div>
                </div>
            </div>
            
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingFour">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
                        会员有哪些专属活动？
                    </button>
                </h2>
                <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#faqAccordion">
                    <div class="accordion-body">
                        会员专属活动包括季度线上挑战赛、线下家庭亲子活动、节假日特别活动等。钻石会员还可以优先参与限量名额的线下训练营和特别工作坊。
                    </div>
                </div>
            </div>
            
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingFive">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
                        如果不满意可以退款吗？
                    </button>
                </h2>
                <div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive" data-bs-parent="#faqAccordion">
                    <div class="accordion-body">
                        我们提供7天无理由退款保证。如果您在开通会员后7天内对服务不满意，可以联系客服申请全额退款。7天后的退款将根据实际使用情况按比例计算。
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 呼吁行动 -->
    <div class="cta-section">
        <h2 class="cta-title">立即加入KidsMind会员</h2>
        <p class="cta-text">开启孩子的思维训练之旅，培养未来的创新思考者</p>
        <a href="#plans" class="btn btn-light btn-lg">选择会员方案</a>
    </div>
</div> 